import { resolveComponent } from 'vue'
import { fliterDataWrapper } from 'common/js/table'
import { timeFilter } from 'common/js/utils'

export const columns = (that) => {
  return [
    {
      key: 'faccd',
      align: 'center',
      width: 110,
      title: '工程名称',
      fixed: 'left',
      render: (h, params) => {
        const { row } = params

        return h('div', {}, [
          h('div', { }, row['facnm']),
          h('div', { }, row['faccd'])
        ])
      }
    },
    {
      key: 'stcd',
      align: 'center',
      width: 110,
      title: '测站名称',
      fixed: 'left',
      render: (h, params) => {
        const { row } = params

        return h('div', {}, [
          h('div', { }, row['stnm']),
          h('div', { }, row['stcd'])
        ])
      }
    },
    {
      key: 'area',
      title: '所属区域',
      align: 'center',
      width: 110,
      fixed: 'left',
      render: (h, params) => {
        const { row } = params

        return h('div', {}, [
          h('div', { }, row['addvcdName']),
          h('div', { }, row['zhenname'])
        ])
      }
    },
    {
      key: 'sw',
      title: '内江 / 外江',
      width: 150,
      align: 'center',
      render: (h, params) => {
        const { row } = params
        let njStatusVal = row.upzStatus
        let wjStatusVal = row.dwzStatus

        let njStatusRen = h('div', { style: { color: njStatusVal == '正常' ? '#19be6b' : '#ed4014' } }, njStatusVal)
        let wjStatusRen = h('div', { style: { color: wjStatusVal == '正常' ? '#19be6b' : '#ed4014' } }, wjStatusVal)

        return h('div', {}, [
          h('div', { 
            style: { 'display': 'flex' } 
          }, [
            h('div', { style: { flex: 1, textAlign: 'left' } }, [
              '内江：',
              fliterDataWrapper(h, row, 'upz'),
            ]),
            njStatusRen
          ]),
          h('div', {
            style: { 'display': 'flex' } 
          }, [
            h('div', { style: { flex: 1, textAlign: 'left' } }, [
              '外江：',
              fliterDataWrapper(h, row, 'dwz'),
            ]),
            wjStatusRen
          ]),
        ])
      }
    },
    {
      key: 'wasTm',
      align: 'center',
      title: '水情监测时间',
      width: 105,
      render: (h, params) => {
        const { row } = params
        
        if (row.wasTm) {
          return h('div', {}, [
            h('div', {}, timeFilter(new Date(row.wasTm), 'yyyy-MM-dd')),
            h('div', {}, timeFilter(new Date(row.wasTm), 'HH:mm:ss')),
          ])
        } else {
          return h('div', {}, '--')
        }
      }
    },
    {
      key: '__custom_levelStatus',
      align: 'center',
      title: '水情数据状态',
      width: 100,
      render: (h, params) => {
        const { row } = params
        const statusStr = row.__custom_levelStatus
        let color = '#19be6b'

        if (statusStr === '缺失') {
          color = '#ed4014'
        } else if (statusStr === '延迟') {
          color = '#ff9900'
        }

        return h('span', { style: { color } }, statusStr)
      }
    },
    {
      key: '__custom_detail',
      title: '工情运行情况',
      width: 300,
      align: 'center',
      render: (h, params) => {
        const { row } = params
        const detailList = row['__custom_detail']

        const renArr = []

        if (detailList) {
          for (let i = 0; i <= detailList.length - 1; i++) {
            const item = detailList[i]

            if (item) {
              renArr.push(
                h('div', {
                  style: {
                    'display': 'flex',
                    'align-items': 'center'
                  }
                }, [
                  h('div', {}, `闸门${ i + 1 }#：${item['RUN_COND'] || '--'}`),
                  h('div', {
                    style: {
                      'flex': 1
                    }
                  }, item['TM']),
                  h('div', {
                    style: {
                      'margin-left': '10px',
                      'color': item['RUN_COND'] === '离线' ? '#ed4014' : (item['TM'] ? '#19be6b' : '#ed4014')
                    }
                  }, item['RUN_COND'] === '离线' ? '离线' : (item['TM'] ? '正常' : '缺失'))
                ]) 
              )
            }
          }
        } else {
          renArr.push(h('span', {}, '--'))
        }
        
        return h('div', {}, renArr)
      }
    },
    {
      key: '__custom_gateDetailStatus',
      align: 'center',
      title: '工情数据状态',
      width: 100,
      render: (h, params) => {
        const { row } = params
        let color = '#19be6b'
        const statusStr = row.__custom_detailStatus

        if (statusStr === '缺失') {
          color = '#ed4014'
        }

        return h('span', { style: { color } }, statusStr)
      }
    },
    {
      key: '__custom_videoDetail',
      align: 'center',
      title: '视频在线情况',
      width: 300,
      render: (h, params) => {
        const { row } = params
        const { __custom_videoDetail } = row

        const renArr = []

        if (__custom_videoDetail) {
          for (let i = 0; i <= __custom_videoDetail.length - 1; i++) {
            const item = __custom_videoDetail[i]

            renArr.push(
                h('div', {
                  style: {
                    'width': '100%',
                    'display': 'flex',
                    'align-items': 'center',
                    'overflow': 'hidden'
                  }
                }, [
                  h('div', {
                    title: item['DEVICENAME'],
                    style: {
                      'white-space': 'nowrap',
                      'flex': '0 0 250px',
                      'overflow': 'hidden',
                      'text-overflow': 'ellipsis',
                      'word-break': 'break-all',
                      'text-align': 'left'
                    }
                  }, `（${ i + 1 }）${item['DEVICENAME'] || '--'}`),
                  h('div', {
                    style: {
                      'margin-left': '10px',
                      'color':item['STATUS'] === 'ON' ? '#19be6b' : '#ed4014'
                    }
                  }, item['STATUS'] === 'ON' ? '在线' : '离线')
                ]) 
              )
          }
        } else {
          renArr.push(h('span', {}, '--'))
        }
        
        return h('div', {}, renArr)
      }
    },
    {
      key: '__custom_videoDetailStatus',
      align: 'center',
      title: '视频状态',
      width: 80,
      render: (h, params) => {
        const { row } = params
        const statusStr = row.__custom_videoDetailStatus
        let color = '#19be6b'

        if (statusStr === '全部离线' || statusStr === '缺失') {
          color = '#ed4014'
        } else if (statusStr === '部分在线') {
          color = '#ff9900'
        }

        return h('span', { style: { color } }, statusStr)
      }
    },
    {
      key: '__custom_source',
      align: 'center',
      title: '数据来源',
      width: 180,
      render: (h, params) => {
        const { row } = params

        return fliterDataWrapper(h, row, '__custom_source')
      }
    },
    {
      key: 'createTime',
      align: 'center',
      title: '统计时间',
      width: 105,
      render: (h, params) => {
        const { row } = params
        
        if (row.createTime) {
          return h('div', {}, [
            h('div', {}, timeFilter(new Date(row.createTime), 'yyyy-MM-dd')),
            h('div', {}, timeFilter(new Date(row.createTime), 'HH:mm:ss')),
          ])
        } else {
          return h('div', {}, '--')
        }
      }
    }
  ]
}

export const sourceList = () => [
  { value: '水务工程监测设施建设项目', label: '水务工程监测设施建设项目' },
  { value: '物联网平台', label: '物联网平台' },
  { value: '镇街水利所', label: '镇街水利所' },
  // { value: '禅城区水务局', label: '禅城区水务局' }
]

export const visionList = () => [
  { value: '1', label: '测站视觉' },
  { value: '2', label: '工程视觉' }
]
